<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个性的js文字洗牌式切换特效 - 站长素材</title>

<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<style type="text/css">
	.example{
		width: 650px;
		margin: 0 auto;
		overflow-x: hidden;
	}
	li {
		font-family: 'Ropa Sans', cursive;
		  font-size: 16px;
		  cursor: pointer;
		  color: #D5D6E2;
		}	

		li:hover {
		  color: #fff;
		}

		ul {
		  list-style-position: inside;
		  padding: 0;
		  line-height: 2;
		}
</style>

<style>  
    body, html {  
        width: 100%;  
        height: 100%;  
        margin: 0;  
        padding: 0;  
        overflow: hidden;  
        position: relative; /* Ensure the body can contain positioned pseudo-elements */  
        background:url(../example.jpeg) top left no-repeat;
    }
</style> 

</head>
<body onload="init();">
<h1 id="text0" style="text-align: center;">This is a shuffle-text.js Example</h1>
<div class="example">
  <ul style="float:left; width:300px;">
	<li id="text1">2017/02/04 TOP PAGE UPDATE.</li>
	<li id="text2">2017/02/03 ABOUT PAGE UPDATE.</li>
	<li id="text3">2017/02/02 CONTACT PAGE UPDATE.</li>
	<li id="text4">2017/01/30 NEWS PAGE UPDATE.</li>
  </ul>
  <ul style="float:right; width:300px;">
	<li id="text5">2017/01/25 INDEX PAGE UPDATE.</li>
	<li id="text6">2017/01/20 NEWS PAGE UPDATE.</li>
	<li id="text7">2017/01/16 ABOUT PAGE UPDATE.</li>
	<li id="text8">2017/01/12 LAUNCHED.</li>
  </ul>
  <br style="clear:both;">
</div>
<p id="text9" style="text-align: center;">shuffle-text.js is under MIT Lisence.</p>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/shuffle-text.js"></script>
<script type="text/javascript">
	function init() {
		  var arr = [];
		  for (var i = 0; i < 10; i++) {
			arr[i] = new ShuffleText(document.querySelector('#text' + i));
		  }
		  for (var i = 0; i < arr.length; i++) {
			$('#text' + i)
			  .data('index', i)
			  .hover(function () {
				arr[$(this).data('index')].start();
			  }, function () {
				arr[$(this).data('index')].start();
			  });
			arr[i].start();
		  }
		}
</script>


</body>
</html>